<template>

  <div class="root">


    <div class="content">

      <el-button  type="primary" icon="Edit" @click="back">再次出库</el-button>
      <el-button  type="primary" icon="Edit" @click="back">返回</el-button>

    </div>

    <div class="a">
      <div class="aaa">
        <el-descriptions title="入库记录详情" style="width: 90%; margin: 10px auto">
          <el-descriptions-item label="出库订单">{{storageOutRecord.storageOutId}}</el-descriptions-item>
          <el-descriptions-item label="出库日期">{{storageOutRecord.storageOutDate}}</el-descriptions-item>
          <el-descriptions-item label="出库人员">{{storageOutRecord.medicineAdmin}}</el-descriptions-item>
          <el-descriptions-item label="出库类型">
            <el-tag size="small">{{storageOutRecord.storageOutType}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="供应商">
            {{storageOutRecord.manufacturerName}}
          </el-descriptions-item>
          <el-descriptions-item label="制单日期">{{storageOutRecord.orderDate}}</el-descriptions-item>
          <el-descriptions-item label="制单人员">{{storageOutRecord.medicineAdminOrder}}</el-descriptions-item>
          <el-descriptions-item label="出库备注">{{storageOutRecord.remarks}}</el-descriptions-item>
          <el-descriptions-item label="审核日期">{{storageOutRecord.reviewDate}}</el-descriptions-item>
          <el-descriptions-item label="审核人员">{{storageOutRecord.medicineAdminReview}}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="bbb">


        <el-table :data="reviewArr" style="width: 90%;height:330px;margin: 0 auto">
          <el-table-column label="序号" align="center" prop="storageOutDetailId" />
          <el-table-column label="药品编码" align="center" prop="medicineId" />

          <el-table-column label="药品名称" align="center" prop="medicineName" />
          <el-table-column label="生产厂家" align="center" prop="manufacturerName" />
          <el-table-column label="数量" align="center" prop="storageOutQuantity"  />
          <el-table-column label="采购价" align="center" prop="purchasePrice" />
          <el-table-column label="零售价" align="center" prop="retailPrice" />
          <el-table-column label="药品有效期" align="center" prop="validityPeriod" />
          <el-table-column label="采购金额" align="center" prop="allpurchasePrice" />
          <el-table-column label="售卖金额" align="center" prop="allRetailPrice" />
        </el-table>

      </div>
      <div class="ccc">
        采购金额合计：<span style="color: red;font-size: 20px;margin-right: 20px">{{purchasePrice}}元</span>
        售卖金额合计：<span style="color: red;font-size: 20px">{{retailPrice}}元</span>

      </div>


    </div>




  </div>






</template>

<script setup>


import {useRoute, useRouter} from "vue-router";
import {listOutrecordinfo} from "@/api/medicine/outrecordinfo.js";
import {getOutrecord} from "@/api/medicine/outrecord.js";

const route = useRoute();
const router = useRouter();
const storageOutId=ref()
const storageOutRecord=ref({})
const reviewArr=ref([])
const purchasePrice=ref(0)
const retailPrice=ref(0)


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    storageOutId: 0,
    purchasePrice:5.0,
    retailPrice:7.0,
    storageOutQuantity:30
  },
  rules: {
  }
});
const { queryParams, form, rules } = toRefs(data);

const back=()=>{
  router.push('/medicine/outrecord')
}



onMounted(()=>{
  storageOutId.value=route.query.storageOutId

  getOutrecord(storageOutId.value).then(res=>{
    console.log(res)
    storageOutRecord.value=res.data
  })


  queryParams.value.storageOutId=storageOutId.value;
  console.log(queryParams.value)

  listOutrecordinfo(queryParams.value).then(res=>{
    console.log(res)
    reviewArr.value = res.rows
    for (const review of reviewArr.value) {
      purchasePrice.value+=review.allpurchasePrice
      retailPrice.value+=review.allRetailPrice
    }
    console.log(purchasePrice.value)
    console.log(retailPrice.value)
  })

})





</script>

<style scoped>

.root{
  height: 632px;
  background-color: #cccccc;
  padding: 10px 20px 0 0;
}

.content{
  float: right;
}

.a{
  margin: 20px 10vw;
  background-color: #dddddd;
}

.aaa{
  width:100%;
  height: 200px;
}
.bbb{
  width:100%;
  height: 350px;
}
</style>
